<template>
  <view class="tree-menu">
    <!-- <view class="tree-title">居民电子健康档案首页</view> -->

    <view class="tree-container">
      <!-- 个人健康标识 -->
      <!-- <view class="tree-node level-1">
        <view class="node-content">
          <text class="node-text">个人健康标识</text>
        </view>
      </view> -->

      <!-- 个人基本健康信息 -->
      <view class="tree-node level-1">
        <view class="node-content" @click="toggleNode('basic-health')">
          <IconFont :name="expandedNodes['basic-health'] ? 'minus' : 'plus'" size="16" />
          <text class="node-text">个人基本健康信息</text>
        </view>

        <view v-if="expandedNodes['basic-health']" class="children">
          <!-- 用户基本信息 -->
          <view class="tree-node level-2">
            <view class="node-content" @click="toggleNode('user-basic')">
              <IconFont :name="expandedNodes['user-basic'] ? 'minus' : 'plus'" size="16" />
              <text class="node-text">用户基本信息</text>
            </view>
            <view v-if="expandedNodes['user-basic']" class="children">
              <view class="tree-node level-3" @click="navigateTo('/package-card/info/personal-person-detail/index')">
                <view class="node-content">
                  <text class="node-text">服务对象个人基本信息</text>
                </view>
              </view>

              <view class="tree-node level-3" @click="navigateTo('/package-my/guardianlist/index')">
                <view class="node-content">
                  <text class="node-text">用户（监护人）信息</text>
                </view>
              </view>

              <view class="tree-node level-3" @click="navigateTo('/package-card/info/demographic-body/index')">
                <view class="node-content">
                  <text class="node-text">下单人信息</text>
                </view>
              </view>

              <view class="tree-node level-3" @click="navigateTo('/package-card/info/personal-manager/index')">
                <view class="node-content">
                  <text class="node-text">健康管理人（健康管家）基本信息</text>
                </view>
              </view>

              <view class="tree-node level-3"
                @click="navigateTo('/package/mine/index')">
                <view class="node-content">
                  <text class="node-text">与客户端-我的关联</text>
                </view>
              </view>
            </view>
          </view>

          <!-- 人口学信息 -->
          <view class="tree-node level-2" @click="navigateTo('/package-card/info/demographic/edit')">
            <view class="node-content">
              <text class="node-text">人口学信息</text>
            </view>
          </view>

          <!-- 社会经济学信息 -->
          <view class="tree-node level-2" @click="navigateTo('/package-card/info/socioeconomic/list')">
            <view class="node-content">
              <text class="node-text">社会经济学信息</text>
            </view>
          </view>

          <!-- 紧急联系人信息 -->
          <view class="tree-node level-2" @click="navigateTo('/package-card/info/emergency-contact/list')">
            <view class="node-content">
              <text class="node-text">紧急联系人信息</text>
            </view>
          </view>

          <!-- 建档信息 -->
          <view class="tree-node level-2" @click="navigateTo('/package-card/info/health-live-habits/index')">
            <view class="node-content">
              <text class="node-text">建档信息</text>
            </view>
          </view>

          <!-- 家庭医生签约信息 -->
          <view class="tree-node level-2" @click="navigateTo('/package-card/info/family-doctor/list')">
            <view class="node-content">
              <text class="node-text">家庭医生签约信息</text>
            </view>
          </view>
          <!-- 基础健康信息 -->
          <view class="tree-node level-2" @click="navigateTo('/package-card/info/health_basepro/list')">
            <view class="node-content">
              <text class="node-text">基础健康信息</text>
            </view>
          </view>
        </view>
      </view>

      <!-- <view class="tree-node level-1" @click="navigateTo('/package-card/info/past-medical/index')">
        <view class="node-content">
          <text class="node-text">既往病史</text>
        </view>
      </view> -->
    </view>

    <!-- 设置token -->
    <!-- <view class="token-section">
      <view class="token-input-container">
        <input class="token-input" v-model="tokenValue" placeholder="请输入token" type="text" />
        <nut-button class="token-button" @click="saveToken">确定</nut-button>
      </view>
    </view> -->

  </view>
</template>

<script setup>
import { ref } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";

// 展开状态管理
const expandedNodes = ref({
  'health-id': false,
  'basic-health': true,
  'user-basic': true
});

// token输入值
const tokenValue = ref('');

// 保存token到localStorage
const saveToken = () => {
  if (tokenValue.value.trim()) {
    Taro.setStorageSync('token', tokenValue.value.trim());
    Taro.showToast({
      title: 'Token保存成功',
      icon: 'success',
      duration: 2000
    });
    tokenValue.value = ''; // 清空输入框
  } else {
    Taro.showToast({
      title: '请输入token',
      icon: 'error',
      duration: 2000
    });
  }
};

// 切换节点展开状态
const toggleNode = (nodeKey) => {
  expandedNodes.value[nodeKey] = !expandedNodes.value[nodeKey];
};

// 导航到指定页面
const navigateTo = (url) => {
  Taro.navigateTo({ url });
};
</script>

<style lang="scss">
.tree-menu {
  padding: 40rpx;
  background-color: #f8f9fa;
  min-height: 100vh;


  .tree-title {
    font-size: 28rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 40rpx;
    text-align: center;
    padding: 30rpx;
    background: white;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  }

  .tree-container {
    background: white;
    border-radius: 16rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  }

  .tree-node {
    border-bottom: 2rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    &.level-1 {
      .node-content {
        padding: 30rpx 40rpx;
        background: #fafafa;
        font-weight: 600;
        color: #333;
      }
    }

    &.level-2 {
      .node-content {
        padding: 24rpx 40rpx 24rpx 80rpx;
        background: white;
        color: #555;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 50rpx;
          top: 0;
          bottom: 0;
          width: 2rpx;
          background: #e0e0e0;
        }

        &::after {
          content: '';
          position: absolute;
          left: 50rpx;
          top: 50%;
          width: 20rpx;
          height: 2rpx;
          background: #e0e0e0;
        }
      }
    }

    &.level-3 {
      .node-content {
        padding: 20rpx 40rpx 20rpx 120rpx;
        background: #f9f9f9;
        color: #666;
        position: relative;

        &::before {
          content: '';
          position: absolute;
          left: 90rpx;
          top: 0;
          bottom: 0;
          width: 2rpx;
          background: #e0e0e0;
        }

        &::after {
          content: '';
          position: absolute;
          left: 90rpx;
          top: 50%;
          width: 20rpx;
          height: 2rpx;
          background: #e0e0e0;
        }
      }

      &:hover .node-content {
        background: #e3f2fd;
        color: #1976d2;
      }
    }
  }

  .node-content {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;

    &:hover {
      background: #f0f0f0;
    }

    &:active {
      background: #e0e0e0;
    }
  }

  .node-text {
    flex: 1;
    margin-left: 16rpx;
    font-size: 28rpx;
    line-height: 1.4;
  }
}
</style>
